<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<link href="../bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
		<script src="../bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
		<meta charset="utf-8">
		<title>bootstrap-datepicler组件(日期)</title>
	</head>
	<body>
		<h3>
			<a href="https://bootstrap-datepicker.readthedocs.io/en/latest/index.html" target="_blank">bootstrap-datepicker文档</a>
		</h3>
		 <div class="form-group form-group-sm col-md-4" style="padding-right: -10px;">
			<label class="col-sm-4 control-label">月份范围：</label>
			<div class="col-sm-8">
				<div class="input-group">
					<input type="text" class="form-control" id="search_month_begin"
						name="search_month_begin"
						readonly="readonly">
					<div class="input-group-addon">
						<i class="fa fa-calendar"></i>
					</div>
				</div>
			</div>
		</div>
		<div class="form-group form-group-sm col-md-4">
			<label class="col-sm-1 control-label">至</label>
			<div class="col-sm-8">
				<div class="input-group">
					<input type="text" class="form-control" id="search_month_end" name="search_month_end"
						    readonly="readonly">
					<div class="input-group-addon">
						<i class="fa fa-calendar"></i>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		$(document).ready(function () {
			//初始化日期选择控件
			$("#search_month_begin").datepicker({
				autoclose: true,
				format: "yyyymm",
				startView: 1,
				maxViewMode: 2,
				minViewMode: 1,
				// clearBtn: true	// 清除按钮
			});
			$("#search_month_end").datepicker({
				autoclose: true,
				format: "yyyymm",
				startView: 1,
				maxViewMode: 2,
				minViewMode: 1,
			});
		});
	</script>
</html>